/*
* @Author: Choisaaaa
* @Date: 2018/5/14  23:40
* 广告头条信息的添加
*/

import React from "react";

import Footer from "component/footer/footer.jsx";
import PageTitle from 'component/page-title/page-title.jsx';
import HeadLine from 'service/head-line-service.jsx'
import FileUploader from 'util/file-uploader/index.jsx';    //图片上传子组件
import MUtil from 'util/mm.jsx';

const _headLine = new HeadLine();
const _mm = new MUtil();

class CategoryAdd extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            categoryList : [],      //商品品类列表
            headLineName : "",       //品类名称
            subImages : [],
            lineId : "",
            priority : 0
        }
    }
    componentDidMount(){
       // this.loadCategoryList();
    }
    componentWillMount(){//组件将要加载
        this.mounted = true;
    }
    componentWillUnmount(){//组件销毁
        this.mounted = false;
    }
    onValueChange(e){//监听输入框和下拉框的值的改变
        let name = e.target.name,
            value = e.target.value;
        this.setState({
            [name] : value
        });
    }
    onSubmit(){//提交按钮的事件
        let imageAdress = this.state.subImages[0],
            headLineName = this.state.headLineName.trim();
        if(typeof imageAdress ==  "undefined"){
            _mm.errorTips("尚未上传图片")
        }
        if(headLineName){
            _headLine.saveHeadLine({
                lineId : this.state.lineId,
                lineName : headLineName,
                lineLink : this.getSubImagesString(),
                priority : this.state.priority
            }).then((res)=>{
                _mm.successTips(res);
                this.props.history.push('/headLine/index');//跳转到公告信息的首页
            },(errMsg)=>{
                _mm.errorTips(errMsg);
            });
        }
    }
    onUploadSuccess(res){//方法3.图片上传成功，将服务响应回来的图片地址保存到数组中
        let subImages = this.state.subImages;
        var image = {
            url : res[0].url,
            uri : res[0].uri
        }
        subImages.push(image);
        this.setState({
            subImages : subImages
        });
    }
    onUploadError(errMsg){//方法4.图片上传失败
        _mm.errorTips(errMsg)
    }
    onImageDelete(e){//方法5.删除上传的图片
        let index = e.target.getAttribute("index");
        let subImages = this.state.subImages;
        subImages.splice(index,1);
        this.setState({
            subImages : subImages
        });
    }
    getSubImagesString (){//将数据元素拼接成String返回
        return this.state.subImages.map((image) =>image.uri).join(",");
    }
    render(){
        let blankDivCss = {//使用一个空白的div撑开与footer之间的距离
            height : "90px"
        } ;
        return(
            <div id="page-wrapper">

                <PageTitle title="发布公告"/>
                <div className="row">
                    <div className="col-md-12">
                        <div className="form-horizontal">

                            <div className="form-group">
                                <label className="col-md-2 control-label">公告内容</label>
                                <div className="col-md-5">
                                    <textarea type="text" className="form-control"
                                           placeholder="请输入公告的信息"
                                           name="headLineName"
                                           onChange={(e) => this.onValueChange(e)}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label className="col-md-2 control-label">设置权重</label>
                                <div className="col-md-5">
                                    <input type="number" className="form-control"
                                              placeholder="请输入权重"
                                              name="priority"
                                              onChange={(e) => this.onValueChange(e)}/>
                                </div>
                            </div>
                            <div className="form-group">
                                <label className="col-md-2 control-label">请上传图片</label>
                                <div className="col-md-10">
                                    {
                                        this.state.subImages.length
                                            ? this.state.subImages.map((image,index) =>
                                            (<div className="img-con" key={index}>
                                                <img src={image.url} alt="公告图片" className="img" id={image.host}/>
                                                <i className="fa fa-close" index={index} onClick={(e) => this.onImageDelete(e)} />
                                            </div>)
                                        )  : (<div className="choose-img">请上传图片</div>)
                                    }
                                </div>
                                <div className="col-md-offset-2 col-md-10 file-upload-con">
                                    <FileUploader onSuccess={(res)=>this.onUploadSuccess(res)}
                                                  onError={(errMsg) => this.onUploadError(errMsg)}
                                                  maxFiles = "1"
                                                  fileFieldName = "headLine"
                                    />
                                </div>
                            </div>
                            <div className="form-group">
                                <div className="col-md-offset-2 col-md-10">
                                    <button type="submit" className="btn btn-primary"
                                            onClick={(e) => {this.onSubmit(e)}}><i className="fa fa-paper-plane"/> Submit</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

                <div className="row" style={blankDivCss}></div>
                <Footer/>
            </div>
        );
    }
}
export default CategoryAdd;